<template>
    <div>
        <div id="clubMember" v-if="clubMemberShow">
            <div class="title">
                <div class="left">成员管理</div>
                <div class="right">
                    <div :class="active==0?'active':''" @click="tabs(0)">全部（{{whole}}）</div>
                    <div :class="active==1?'active':''" @click="tabs(1)">待审核（{{audit}}）</div>
                    <div :class="active==2?'active':''" @click="tabs(2)">已驳回（{{reject}}）</div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="content">
                <div class="list">
                    <img src="../../image/beijingtu.png" alt="" class="left">
                    <div class="right">
                        <div class="headline">王恒川</div>
                        <div>申请时间：2020-3-6 拷贝</div>
                        <div>出生日期：1985-7</div>
                        <div>工作单位：顺义文化馆</div>
                        <div class="audit" @click="goAudit">去审核</div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <div class="page" @click="homePage">首页</div>
                <!-- v-show="pageSize > 0"
                :total="listData.length"
                @pagination="getListData" -->
                <el-pagination background
                    :total="45"
                    layout="prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="pageSize"
                    @current-change="clickChange">
                </el-pagination>
                <div class="page" @click="trailingPage">尾页</div>
            </div>
        </div>
        <!-- 去审核 -->
        <div id="audit" v-if="auditShow">
            <div class="title">待审核</div>
            <!-- 列表 -->
            <div class="content">
                <div class="top">
                    <div class="left">
                        <img src="../../image/beijingtu.png" alt="">
                    </div>
                    <div class="right">
                        <!-- 基本信息 -->
                        <div class="basicMessage">
                            <div>姓名：陈思含</div>
                            <div>学历：本科</div>
                        </div>
                        <div class="basicMessage">
                            <div>性别：女</div>
                            <div>毕业院校：北京音乐学院</div>
                        </div>
                        <div class="basicMessage">
                            <div>出生日期：1986-07</div>
                            <div>工作单位：北京市文化馆</div>
                        </div>
                        <div class="basicMessage">
                            <div>联系电话：18245678765</div>
                            <div>空闲时间：周六日</div>
                        </div>
                        <!-- 特长介绍 -->
                        <div class="specialtyReferral">
                            <div class="one">特长/喜好：</div>
                            <div class="two">热爱音乐，对音乐有一定的见解，喜欢广交朋友</div>
                        </div>
                        <div class="specialtyReferral">
                            <div class="one">自我介绍：</div>
                            <div class="two">毕业于伯克利音乐学院，从事音乐行业12年，2018曾获得北京歌唱大赛第二名，独特的教</div>
                        </div>
                        <div class="specialtyReferral">
                            <div class="one">申请时间：</div>
                            <div class="two">2021-03-08</div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="auditAgree" @click="auditAgree">同意</div>
                    <div class="auditReject" @click="auditReject">驳回</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            clubMemberShow: true, // 成员管理默认隐藏
            active: 0, // 切换成员管理状态样式
            whole: "30",// 全部
            audit: "10",// 待审核
            reject: "3",// 已驳回
            pageNum: 1, //显示第几页
            pageSize: 6, //一页的数据数量
            auditShow: false, // 去审核默认隐藏
        };
	},
    mounted(){
    },
	methods: {
        // 切换成员管理状态样式
        tabs(index) {
            this.active = index
        },
        // 首页
        homePage() {
            this.clickChange(1)
        },
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 尾页
        trailingPage(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 显示去审核弹框
        goAudit(){
            this.clubMemberShow = false
            this.auditShow = true
        },
        // 已同意
        auditAgree(){
            this.auditShow = false
            this.clubMemberShow = true
            this.$message({
                message: "已同意",
                type: 'success'
            });
        },
        // 驳回
        auditReject(){
            this.auditShow = false
            this.clubMemberShow = true
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #clubMember{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .left{
                flex: 1;
            }
            .right{
                flex: 1;
                height: 20px;
                font-size: 16px;
                display: flex;
                margin-top: 2%;
                .active{
                    color: #F19417;
                }
                div{
                    flex: 1;
                    text-align: right;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 400px;
            overflow: auto;
            margin-top: 2%;
            display: flex;
            flex-wrap: wrap; // 自动换行
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
            }
            .list{
                width: 31%;
                height: 150px;
                margin: 1% 1% 1% 1%;
                border-radius: 10px;
                display: flex;
                .left{
                    flex: 1;
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    margin-right: 3%;
                }
                .right{
                    flex: 1;
                    width: 46%;
                    margin: 0% 2%;
                    div{
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #888888;
                        margin-top: 6%;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .headline{
                        font-size: 18px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin: 5% 0% 9% 0%;
                    }
                    .audit{
                        width: 50%;
                        line-height: 26px;
                        text-align: center;
                        color: white;
                        background: #F19417;
                        border-radius: 5px;
                        margin-top: 8%;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
    // 去审核
    #audit{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            text-align: center;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 3% 3% 2% 3%;
                display: flex;
                font-size: 14px;
                .left{
                    flex: 1;
                    text-align: right;
                    margin-right: 3%;
                    img{
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                    }
                }
                .right{
                    flex: 3;
                    div{
                        line-height: 30px;
                    }
                    // 基本信息
                    .basicMessage{
                        display: flex;
                        div{
                            flex: 1;
                        }
                    }
                    // 特长介绍
                    .specialtyReferral{
                        display: flex;
                        .one{
                            flex: 1;
                        }
                        .two{
                            flex: 6;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                margin-top: 5%;
                display: flex;
                div{
                    width: 15%;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 5px;
                }
                .auditAgree{
                    margin: 0% 5% 0% 25%;
                    background: #F19417;
                    color: white;
                }
                .auditReject{
                    background: #ddd;
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #clubMember{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .left{
                flex: 1;
            }
            .right{
                flex: 1;
                height: 18px;
                font-size: 14px;
                display: flex;
                margin-top: 2%;
                div{
                    flex: 1;
                    text-align: right;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 400px;
            overflow: auto;
            margin-top: 2%;
            display: flex;
            flex-wrap: wrap; // 自动换行
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
            }
            .list{
                width: 31%;
                height: 140px;
                margin: 1% 1% 1% 1%;
                border-radius: 10px;
                display: flex;
                .left{
                    flex: 1;
                    width: 110px;
                    height: 110px;
                    border-radius: 50%;
                    margin-right: 3%;
                }
                .right{
                    flex: 1;
                    width: 44%;
                    padding: 0% 1.5%;
                    div{
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #888888;
                        margin-top: 5%;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .headline{
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin: 5% 0% 9% 0%;
                    }
                    .audit{
                        width: 50%;
                        line-height: 24px;
                        text-align: center;
                        color: white;
                        background: #F19417;
                        border-radius: 5px;
                        margin-top: 10%;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
    // 去审核
    #audit{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            text-align: center;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 3% 3% 2% 3%;
                display: flex;
                font-size: 12px;
                .left{
                    flex: 1;
                    text-align: right;
                    margin-right: 3%;
                    img{
                        width: 110px;
                        height: 110px;
                        border-radius: 50%;
                    }
                }
                .right{
                    flex: 3;
                    div{
                        line-height: 30px;
                    }
                    // 基本信息
                    .basicMessage{
                        display: flex;
                        div{
                            flex: 1;
                        }
                    }
                    // 特长介绍
                    .specialtyReferral{
                        display: flex;
                        .one{
                            flex: 1;
                        }
                        .two{
                            flex: 6;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                margin-top: 5%;
                display: flex;
                div{
                    width: 15%;
                    text-align: center;
                    line-height: 26px;
                    border-radius: 5px;
                }
                .auditAgree{
                    margin: 0% 5% 0% 27%;
                    background: #F19417;
                    color: white;
                }
                .auditReject{
                    background: #ddd;
                }
            }
        }
    }
}
</style>